<template>
  <section style="padding:0">
    <van-sticky>
      <van-nav-bar class="f-supplier-bar" title="我的供应商">
        <template #left>
          <van-icon name="arrow-left" size="18" @click="pageBack" />
        </template>
        <template #right>
          <van-icon name="scan" size="18" @click="extractCode" />
        </template>
      </van-nav-bar>
    </van-sticky>

    <section class='f-supplier'>
      <p class="f-title">
        <span>我的供应商 </span>
        <span>({{supplierList.length}})</span>
      </p>

      <section class="f-card" v-for="(item,index) in supplierList" :key="index">
        <div class="f-name">
          <div class="g-flex-ct">
            <img style="width:32px;height:32px" src="@/assets/icons/jhh_gys_head.png" alt="">
            <p class="f-ml-10" style="font-size: 14px;color: #0B0000;">{{item.shopName || '--'}}</p>
          </div>
          <p>{{ getDateTime(item.joinTime)[6] }}</p>
        </div>
        <div class="f-contacts">
          <p style="color:#666666">店铺联系人</p>
          <p class="g-flex-ct">
            <span class="f-mr-05">{{item.contactsName}}【{{item.contactsPhone}}】</span>

            <img style="width:11px;height:12px" src="@/assets/icons/jhh_icon_dial.png" alt="">
          </p>
        </div>
        <div v-if="item.artificialFlag || item.wechatFlag" class="f-kefu">
          <p v-if="item.artificialFlag" class="g-flex-ct" @click="handleKefu(item.artificialKey)">
            <img style="width:16px;height:16px" src="@/assets/icons/jhh_icon_kf_rengong.png" alt="">
            <span class="f-ml-05" style="font-size: 14px;">人工客服</span>
          </p>
          <p v-if="item.wechatFlag" class="g-flex-ct" @click="toWechat(item)">
            <img style="width:16px;height:16px" src="@/assets/icons/jhh_icon_kf_weixin.png" alt="">
            <span class="f-ml-05" style="font-size: 14px;">微信客服</span>
          </p>
        </div>
      </section>

      <van-empty v-if="!supplierList.length" description="暂无分销商信息" />
    </section>
  </section>
</template>


<script>
import { ref, reactive, toRefs, onMounted, watch, onBeforeUnmount, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from "vuex";
import api from '../api'
import { getDateTime, successDeal } from '@/utils/utils';
import JsBridge from '@/utils/JsBridge.js'
import { showLoadingToast, closeToast } from 'vant';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      supplierList: [],
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '我的供应商',
        show: false,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      getMySupplier()
    })

    const getMySupplier = () => {
      let json = {
        "orderBy": "",
        "freezeStatus": "",
        "shieldStatus": "",
        "shopName": "",
        "page": 1,
        "size": 90
      }
      api.mySupplier(json).then(res => {
        state.supplierList = res.data.records
      })
    }

    const pageBack = () => {
      router.go(-1)
    };

    // 识别二维码
    const extractCode = () => {
      JsBridge.callHandler('qrCode', null, (res) => {
        let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        let shopId
        if (isiOS) {
          shopId = JSON.parse(res).result
        } else {
          shopId = res
        }
        console.log('qrCode 响应值 ： ', res);

        router.push({
          path: '/shop/supplierBind',
          query: {
            shopId: shopId
          }
        })
      })
    }

    const setKefu = () => {
      var script = document.createElement('script');
      script.id = 'HKB_kefu'
      script.src = 'https://ykf-webchat.7moor.com/javascripts/7moorInit.js?accessId=b8b1b530-94cb-11ee-aa04-4b24b0611125&autoShow=false&language=ZHCN';
      script.async = true
      document.body.appendChild(script);
    }

    const handleKefu = (artificialKey) => {
      router.push({
        path: '/shop/customer',
        query: {
          // 'b8b1b530-94cb-11ee-aa04-4b24b0611125'
          artificialKey: artificialKey
        }
      })
    }

    const toWechat = (params) => {
      console.log(params)
      router.push({
        path: "/shop/supplier/wechat",
        query: {
          wechatQr: params.wechatQr,
          wechatAccount: params.wechatAccount,
          shopName: params.shopName
        }
      })
    }

    return {
      ...toRefs(state),
      getDateTime,
      pageBack,
      extractCode,
      handleKefu,
      toWechat
    }
  }
}
</script>
<style lang='scss' scoped>
.f-supplier-bar {
  padding-top: 27px;
  background: #3273f4;
}
.f-supplier {
  padding: 14px 17px;
  .f-img1 {
    width: 344px;
    height: 70px;
  }
  .f-title {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
  }

  .f-card {
    width: 344px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 51, 119, 0.1);
    border-radius: 10px;
    margin: 10px 0;
    color: #424242;
    padding: 0 3px;
    .f-name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 6px 9px 12px;
      border-bottom: 1px dashed #aaaaaa;
    }
    .f-contacts {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 6px 13px 12px;
    }
    .f-kefu {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 13px 6px 13px 12px;
      border-top: 1px solid #aaaaaa;
    }
  }
}
</style>

<style>
.qimo_chatpup {
  background: #19caa6 !important;
  padding-top: 27px;
}
</style>